<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { openSSW, closeSSW } from '@/module/socket'
  import { linkRoomModule, getRoomInfo, endRoomModule, heartBeatModule, isstart } from '@/module/room'
  import CONFIG from '@/config'
  import * as PIXI from "pixi.js"
  import { Container, Graphics } from "pixi.js"
  import ConnectRoom from '@/components/ConnectRoom.vue'
  import LogBoard from '@/components/LogBoard.vue'
  import PrintBoard from '@/components/PrintBoard.vue'
  import DetailBoard from '@/components/DetailBoard.vue'
  import { insertDM } from '@/module/logboard'

  

  const timer = ref()

  const windowsWidth = ref(window.innerWidth)
  const windowsHeight = ref(window.innerHeight)

  const pixiapp = ref()
  const roomBackground : any = ref(null)
  const room : any = ref(null)


  //断开直播间
  const endRoom = () => {
    endRoomModule()
  }

  onMounted(() => {
    
    //添加背景
    let colors = [0xa0cfff, 0xb3e19d,  0xf3d19e, 0xfab6b6]
    let bgcolor =  colors[Math.floor(Math.random() * colors.length)]

    let icons = CONFIG.ICONLIST
    let iconpath = CONFIG.ICONPATH
    //随机一种icon
    let inx = Math.floor(Math.random() * icons.length)
    //加载该icon
    let texture = PIXI.Texture.from(iconpath + icons[inx])

    initBoard(inx, iconpath + icons[inx], bgcolor)
    //如果窗口大小变化，则重新初始化背景
    window.onresize = () => {
      initBoard(inx, iconpath + icons[inx], bgcolor)
    }
    //如果关闭页面，则自动触发关闭连接函数
    room.value.addEventListener('beforeunload', () => endRoom())
    room.value.addEventListener('unload', () => endRoom())
    window.addEventListener('beforeunload', () => endRoom())
    window.addEventListener('unload', () => endRoom())

  })

  
  //初始化画板
  const initBoard = (inx: number, path: string, bgcolor: number) => {   

    //删除原先的子元素
    if(pixiapp.value){
      pixiapp.value.stop()
      pixiapp.value.destroy(true)
    }
    // if(roomBackground.value.childNodes.length != 0){
    //   roomBackground.value.removeChild(roomBackground.value.childNodes[0])
    // }
    
    pixiapp.value = new PIXI.Application({
                      width: windowsWidth.value, // default: 800 宽度
                      height: windowsHeight.value, // default: 600 高度
                      antialias: CONFIG.ANTIALIAS, // default: false 反锯齿
                      transparent: false, // default: false 透明度
                      resolution: 1, // default: 1 分辨率
                    })
    //设置背景
    pixiapp.value.renderer.backgroundColor = bgcolor
    //加入子元素
    if(roomBackground.value != null)
      roomBackground.value.appendChild(pixiapp.value.view)

    let foods = new Container();
    let aFood

    //循环将icon加入容器中
    for(let i = -100; i < windowsWidth.value + 100; i += 100){
      for(let j = -100; j < windowsHeight.value + 100; j += 100){
        aFood = new PIXI.Sprite(PIXI.utils.TextureCache[path])
        aFood.width = 40
        aFood.height = 40
        aFood.x = i 
        aFood.y = j 
        foods.addChild(aFood)
      }
    }
    //容器整体加入画板中
    pixiapp.value.stage.addChild(foods)
    //容器移动
    pixiapp.value.ticker.add(() => {
      foods.x = (foods.x + 1) >  100 ? -100 : (foods.x + 1)
      foods.y = (foods.y + 1) >  100 ? -100 : (foods.y + 1)
    })
  
}
</script>

<template>
  <div class="room" ref="room">
    <div ref="roomBackground" class="roomBackground">
    </div>
    <ConnectRoom v-if="!isstart"/>
    <div v-if="isstart" class="playing-board" justify="space-between">
      <div class="left-bar" >
        <div class="log-board"><LogBoard/></div>
        <!-- <div class="detail-board" @click="insertDM('一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十')">没写好</div> -->
      </div>
      <div class="middle-bar">
        <div class="log-board"><PrintBoard/></div>
      </div>
      <div class="right-bar">
        <div class="detail-board"><DetailBoard/></div>
      </div>
    </div>
    
    
  </div>
</template>

<style scoped>
  .roomBackground{
    position: fixed;
    top: 0;
    z-index: -1;
  }
  .room{
    height: 100%;
    width: 100%;
  }
  .playing-board{
    height: 100%;
    width: 100%;
    display: flex;
  }

  .left-bar, .right-bar{
    width: 250px;
    margin-top: 40px;
    margin-left: 30px;
    margin-right: 30px;
  }

</style>
